<template>
  
  <el-tabs v-model="activeName" @tab-click="handleClick">
     <el-tab-pane label="一级团长" name="first">
    <el-form :inline="true" :model="formInline" class="demo-form-inline form-style">
  <el-form-item label="团长名称："></el-form-item>
  <el-form-item label="累计获得提成："></el-form-item>
  <el-form-item label="一级团长数："></el-form-item>
  <el-form-item label="二级团长数："></el-form-item>
  <el-form-item label="上级团长："></el-form-item>
  <el-form-item label="上二级团长："></el-form-item>
</el-form>
    <el-form ref="form" :model="form" label-width="80px" class="form-style">
      <el-form-item style="margin:15px 0 15px 0">
        <el-input v-model="form.name" placeholder=" 拉新团长姓名"></el-input>
      </el-form-item>
      <el-form-item style="margin:15px 0 15px 0">
        <el-input v-model="form.time" placeholder="注册时间"></el-input>
      </el-form-item>
      <el-form-item style="margin:15px 0 15px 0">
        <el-button>重置</el-button>
        <el-button>查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-style">
      <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="name" label="拉新团长"></el-table-column>
      <el-table-column prop="date" label="注册时间" ></el-table-column>
      <el-table-column prop="money" label="销售总额"></el-table-column>
      <el-table-column prop="order" label="销售订单数"></el-table-column>
      <el-table-column prop="goods" label="发布商品数"></el-table-column>
      <el-table-column prop="event" label="发布活动数"></el-table-column>
      <el-table-column prop="getmoney" label="可提现金额"></el-table-column>
      <el-table-column prop="getmoneys" label="已提现金额"></el-table-column>
      <el-table-column  label="提供的提成">--</el-table-column>
    </el-table>
    <botpage
      class="botpage-style"
      :currentPage="currentPage"
      :PageSize="PageSize"
      :total="total"
      @handleCurrentChange="currentChange"
      @handleSizeChange="pageSizeChange"
    />
    </div>
    </el-tab-pane>
    <el-tab-pane label="二级团长" name="second">
      ssadadas
    </el-tab-pane>
 </el-tabs>
 
</template>

<script>
import Botpage from '@/components/botpage/Botpage'
export default {
    components: {
        Botpage
    },
  data() {
    return {
      activeName:"first",
        tableData: [{
            date: '2016-05-02',
            name: '王小虎a',
            money: '200',
            order:20,
            goods:13,
            event:20,
            getmoney:'300.00',
            getmoneys:'100'
          }, 
          {
            date: '2016-05-04',
            name: '王小虎b',
                        money: '3200',
            order:20,
            goods:13,
            event:20,
            getmoney:'300.00',
            getmoneys:'100'
          }, 
          {
            date: '2016-05-01',
            name: '王小虎v',
                        money: '2200',
            order:20,
            goods:13,
            event:20,
            getmoney:'300.00',
            getmoneys:'100'
          }, 
          {
            date: '2016-05-03',
            name: '王小虎e',
                        money: '1200',
            order:20,
            goods:13,
            event:20,
            getmoney:'300.00',
            getmoneys:'100'
          }],
      state: 1,
      currentPage: 1,
      PageSize: 10,
      total: 1,
      form: {},
      formInline:{}
    };
  },
  methods: {
    handleClick(tab, event) {
        console.log(tab, event);
      },
    currentChange(val) {
      this.currentPage = val ;
    },
    pageSizeChange(val) {
      this.PageSize = val;
    }
  }
};
</script>

<style lang='less' scoped>
.demo-form-inline {
  display: flex;
  flex-wrap: wrap;
  flex: 25%;
  justify-content: space-around;
  align-items: center;
}
.laxin-top {
  display: flex;
  justify-content: space-around;
background-color: #f8f8f8;
  width: 96%;
  margin: 0 auto 30px;
  flex-wrap: wrap;
  div {
    flex: 48%;
    margin: 30px 0 30px 20px;
  }
}
.el-form {
  margin: 0 auto 30px;
  width: 96%;
  display: flex;
  .el-form-item {
    width: 30%;
  }
}
</style>